import React from 'react'
import {Row, Col} from 'antd'

class App extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
    }
    this.visionMouseEnter = this.visionMouseEnter.bind(this)
    this.visionMouseLeave = this.visionMouseLeave.bind(this)
  }
  componentDidMount () {
    setTimeout(() => {
      global.LazyLoadImg && global.LazyLoadImg.load()
    }, 0)
    setTimeout(() => {
      let dom = document.getElementsByClassName('secondTitle')
      dom[0].className = dom[0].className.replace('none', 'fadeInUp')
    }, 1000)
    setTimeout(() => {
      let dom1 = document.getElementsByClassName('big-light')
      let dom2 = document.getElementsByClassName('small-light')
      dom1[0].className = dom1[0].className.replace('none', 'fadeInRight')
      dom2[0].className = dom2[0].className.replace('none', 'fadeInLeft')
    }, 2000)

    window.onscroll = () => {
      global.LazyLoadImg && global.LazyLoadImg.load()
      if (document.getElementsByClassName('service-content')[0].getBoundingClientRect().top < 1024) {
        let doms = document.getElementsByClassName('service-content-item')
        setTimeout(() => {
          doms[0].className = doms[0].className.replace('none', 'fadeInUp animated')
        }, 0)
        setTimeout(() => {
          doms[1].className = doms[1].className.replace('none', 'fadeInUp animated')
        }, 350)
        setTimeout(() => {
          doms[2].className = doms[2].className.replace('none', 'fadeInUp animated')
        }, 700)
      }
    }
  }

  visionMouseEnter (index) {
    let children = document.getElementsByClassName('vision-content-item')[index].children
    let childs = children[0].children
    if (childs[0].className.indexOf('fadingOut-i') > -1) {
      childs[0].className = childs[0].className.replace('fadingOut-i', 'fading-i')
      childs[1].className = childs[1].className.replace('fadingOut-name', 'fading-name')
    } else {
      childs[0].className += ' fading-i'
      childs[1].className += ' fading-name'
    }
  }

  visionMouseLeave (index) {
    let children = document.getElementsByClassName('vision-content-item')[index].children
    let childs = children[0].children
    childs[0].className = childs[0].className.replace('fading-i', 'fadingOut-i')
    childs[1].className = childs[1].className.replace('fading-name', 'fadingOut-name')
  }

  render () {
    return (
      <div className='advertise'>
        <div className='advertise-head'>
          <div className='advertise-logo clearfix pt35'>
            <img
              width='173'
              height='33'
              alt='fusion logo'
              data-src='/assets/images/fusion-logo.png'
              className='fl'
            />
            <p className='advertise-title fl f24'><span className='pl15 pr15'>l</span>Fusion for future</p>
            <div className='first-title p-relative'>
              <img
                width='1189'
                height='87'
                alt='primary title'
                data-src='/assets/images/first-title.png'
                className='fadeInUp'
              />
              <img
                width='943'
                height='32'
                alt='second title'
                data-src='/assets/images/second-title.png'
                className='mt40 ml90 secondTitle none'
              />
              <div className='animated big-light p-absolute none'>
                <img
                  width='540'
                  height='304'
                  alt='big-light'
                  data-src='/assets/images/light.png'
                />
              </div>
              <div className='small-light p-absolute none'>
                <img
                  width='270'
                  height='152'
                  alt='small-light'
                  data-src='/assets/images/light.png'
                />
              </div>
            </div>
          </div>
        </div>
        <div className='advertise-vision'>
          <p className='common-title tac pt55'>Vision</p>
          <div className='common-border mt15' />
          <Row className='vision-content mt30'>
            <Col
              span={8}
              className='vision-content-item cursor-pointer'
              onMouseEnter={_ => { this.visionMouseEnter(0) }}
              onMouseLeave={_ => { this.visionMouseLeave(0) }}
            >
              <div className='content-up'>
                <i className='icon-empower' />
                <p className='vision-content-name'>Empower</p>
              </div>
              <p className='vision-content-desc'>Provides efficient access to digitalized insurance for all partners</p>
            </Col>
            <Col
              span={8}
              className='vision-content-item cursor-pointer'
              onMouseEnter={_ => { this.visionMouseEnter(1) }}
              onMouseLeave={_ => { this.visionMouseLeave(1) }}
            >
              <div className='content-up'>
                <i className='icon-win' />
                <p className='vision-content-name'>Win-Win</p>
              </div>
              <p className='vision-content-desc'>Uses powerful financial analyzing system to achieve win-win situation</p>
            </Col>
            <Col
              span={8}
              className='vision-content-item cursor-pointer'
              onMouseEnter={_ => { this.visionMouseEnter(2) }}
              onMouseLeave={_ => { this.visionMouseLeave(2) }}
            >
              <div className='content-up'>
                <i className='icon-open' />
                <p className='vision-content-name'>Open</p>
              </div>
              <p className='vision-content-desc'>Provides you fast, reliable integration with Fusion.</p>
            </Col>
          </Row>
        </div>
        <div className='advertise-service'>
          <p className='service-title tac pt70'>Service</p>
          <div className='service-border mt15' />
          <Row className='service-content mt60'>
            <Col span={8} className='service-content-item none'>
              <img
                data-src='/assets/images/insurance-platform.png'
                width='150'
                height='150'
                alt='empower'
              />
              <p className='service-content-name'>Insurance Platform</p>
              <p className='service-content-desc'>Fusion builds a close-loop insurance platform with 5 modules-integration, product management, data marketing tools, financial management and customer service.</p>
            </Col>
            <Col span={8} className='service-content-item none'>
              <img
                data-src='/assets/images/product-engine.png'
                width='150'
                height='150'
                alt='empower'
              />
              <p className='service-content-name'>Product Engine</p>
              <p className='service-content-desc'>Supports all kinds of insurance, including property insurance, health insurance and life insurance. </p>
            </Col>
            <Col span={8} className='service-content-item none'>
              <img
                data-src='/assets/images/setting.png'
                width='150'
                height='150'
                alt='empower'
              />
              <p className='service-content-name'>Data Marketing Tools</p>
              <p className='service-content-desc'>Utilize the marketing tools based on big data and user behaviour analytics to help partners monetize the traffic efficiently.</p>
            </Col>
          </Row>
        </div>
        <div className='advertise-partner'>
          <p className='common-title tac pt90'>Partner</p>
          <div className='common-border mt15' />
          <div className='partner-logo mt55'>
            <img
              data-src='/assets/images/logo1.png'
              width='440'
              height='130'
              alt='zhonganonline'
            />
            <img
              data-src='/assets/images/logo2.png'
              width='440'
              height='130'
              alt='zhongantech'
              className='ml80'
            />
          </div>
        </div>
        <div className='advertise-footer fcw'>
          <div className='footer-content clearfix'>
            <div className='fl pt65 footer-logo'>
              <img
                width='173'
                height='33'
                alt='logo'
                data-src='/assets/images/fusion-logo.png'
                className='logo'
              />
              <p className='f22 slogan'>Fusion for future</p>
            </div>
            <div className='fl contract-info'>
              <p className='f36 pt45'>Contact</p>
              <div className='c-border' />
              <p className='f18 pt20'>
                <p className='fl left-title'>
                  <img
                    width='16'
                    height='16'
                    alt='phone'
                    data-src='/assets/images/phone.png'
                  />
                  <span className='pl10'>Tel : </span>
                </p>
                <p className='fl right-content'>(852) 25211181</p>
              </p>
              <p className='f18 pt5'>
                <p className='fl left-title'>
                  <img
                    width='16'
                    height='14'
                    alt='phone'
                    data-src='/assets/images/icon_fax.png'
                  />
                  <span className='pl10'>Fax :</span>
                </p>
                <p className='fl right-content'>(852) 3460 5431</p>
              </p>
              <p className='f18 pt5'>
                <p className='fl left-title'>
                  <img
                    width='16'
                    height='16'
                    alt='email'
                    data-src='/assets/images/email.png'
                  />
                  <span className='pl10'>Mail :</span>
                </p>
                <p className='fl right-content'>cs_fusion@zatech.com</p>
              </p>
              <p className='f18 pt5'>
                <p className='fl left-title'>
                  <img
                    width='16'
                    height='16'
                    alt='address'
                    data-src='/assets/images/address.png'
                  />
                  <span className='pl10'>Address :</span>
                </p>
                <p className='fl right-content'>Unit 403, Level 4, IT Street, Cyberport 3, 100 Cyberport Road, Hong Kong</p>
              </p>
            </div>
          </div>
          <p className='tac f18 mt35'>Copyright © {new Date().getFullYear()} zhongan.com, Inc. or its affiliates. All Rights Reserved</p>
        </div>
      </div>
    )
  }
}

export default App
